<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--    引入js 和 css-->
    <script src="./js/vue.js"></script>
    <script src="./element-ui/lib/index.js"></script>
    <script src="./js/axios-0.18.0.js"></script>
<!--        <link rel="stylesheet" href="./element-ui/packages/theme-chalk/lib/index.css">-->
    <link rel="stylesheet" href="./element-ui/lib/theme-chalk/index.css">
    <!--    引入样式-->
    <!--        <script src="http://localhost:8080/js/vue.js"></script>-->
    <!--        <script src="http://localhost:8080/element-ui/lib/index.js"></script>-->
    <!--        <script src="http://localhost:8080/js/axios-0.18.0.js"></script>-->
    <!--        <link rel="stylesheet" href="http://localhost:8080/element-ui/lib/theme-chalk/index.css">-->
    <style>
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }
    </style>
</head>
<body>


<div id="app">
    <!--        表单输入框-->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="商品名称">
            <el-input v-model="formInline.name" placeholder="请输入商品名称"></el-input>
        </el-form-item>

        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
    </el-form>
    <el-button @click="batchDelete" type="danger">批量删除</el-button>
    <el-button @click="dialogVisible = true" type="primary">新增</el-button>
    <!--        表格-->
    <template>
        <el-table
                :data="tableData"
                style="width: 100%"
                :row-class-name="tableRowClassName"
                @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"></el-table-column>

            <el-table-column type="index" prop="id" width="50"></el-table-column>
            <el-table-column
                    prop="name"
                    align="center"
                    label="商品名称"
            >
            </el-table-column>
            <el-table-column
                    prop="price"
                    align="center"
                    label="价格"
            >
            </el-table-column>
            <el-table-column
                    prop="remark"
                    align="center"
                    label="备注">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作">
                <template slot-scope="scope">
                    <el-button @click="updateProduct(scope.row)" type="primary">修改</el-button>
                    <el-button @click="del(scope.row)" type="danger">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </template>
    <div class="block">
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-size="pageSize"
                :page-sizes="[5, 10, 15, 20]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="200">
        </el-pagination>

        <!--            新增对话框-->
        <el-dialog title="新增" :visible.sync="dialogVisible" width="30%">
            <!--            新增的时候获取到一个表单-->
            <el-form :model="insertForm" status-icon :rules="rules" ref="ruleForm" label-width="100px"
                     class="demo-ruleForm">

                <el-form-item label="商品名称" prop="name">
                    <el-input type="text" v-model="insertForm.name" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="价格" prop="price">
                    <el-input type="text" v-model="insertForm.price" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="备注" prop="remark">
                    <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="insertForm.remark">
                    </el-input>
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="insert">确 定</el-button>
            </span>
        </el-dialog>

        <!--            编辑对话框-->
        <el-dialog
                title="编辑"
                :visible.sync="updateDialogVisible"
                width="30%"
        >
            <el-form :model="updateForm" status-icon :rules="rules" ref="updateForm" label-width="100px"
                     class="demo-ruleForm">
                <el-form-item label="商品id" prop="id">
                    <el-input type="text" v-model="updateForm.id" autocomplete="off" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="商品名称" prop="name">
                    <el-input type="text" v-model="updateForm.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="价格" prop="price">
                    <el-input type="text" v-model="updateForm.price" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="备注" prop="age">
                    <el-input
                            type="textarea"
                            :rows="2"
                            placeholder="请输入内容"
                            v-model="updateForm.remark">
                    </el-input>

                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
    <el-button @click="updateDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="updateSubmit">确 定</el-button>
  </span>
        </el-dialog>
    </div>
</div>
<script>
    new Vue({
        el: '#app',

        methods: {

            //删除方法
            del(row) {
                _this = this;
                console.log(row.id);
                let _this = this;
                console.log(_this);
                axios({
                    method: 'delete',
                    url: '/product',
                    withCredentials:true,
                    params: {
                        ids:row.id
                    }
                }).then(function (response) {
                    if ("no" == response.data) {
                        alert("删除失败")
                    } else {
                        _this.listProduct();
                    }
                });
                // _this.updateDialogVisible = false;
                // _this.insertForm = {
                //     name: '',
                //     price: '',
                //     remark: ''
                // };
                this.fetchdata().then();
            },
            //批量删除
            batchDelete(){
                let param = '';
                let arr = this.multipleSelection;
                //获取数组中么每个值的ID
                for (let i = 0; i < arr.length; i++) {
                    if (i == 0){
                        param = arr[i].id
                    }else {
                        param = param + ',' +arr[i].id
                    }
                }
                let _this = this;
                console.log(_this);
                axios({
                    method: 'delete',
                    url: '/product',
                    withCredentials:true,
                    params: {
                        ids:param
                    }
                }).then(function (response) {
                    if ("no" == response.data) {
                        alert("删除失败")
                    } else {
                        _this.listProduct();
                    }
                });
                this.fetchdata().then();
            },
            //编辑方法
            updateProduct(row) {
                console.log(row);
                var _this = this;
                this.updateForm = row;
                this.updateDialogVisible = true;

            },
            // 更新操作
            updateSubmit(){
                let _this = this;
                console.log(_this);
                //关掉弹框
                axios({
                    method: 'put',
                    url: '/product',
                    withCredentials:true,
                    params: this.updateForm
                }).then(function (response) {
                    if ("no" == response.data) {
                        alert("更新失败")
                    } else {
                        _this.listProduct();
                    }
                });
                _this.updateDialogVisible = false;
                _this.insertForm = {
                    name: '',
                    price: '',
                    remark: ''
                };
                this.fetchdata().then();
            },

            //弹框方法
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        alert('submit!');
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            handleDelete(index, row) {
                console.log(index, row);
            },
            setCurrentRow(row) {
                console.log(row)
            },

            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
                console.log(this.multipleSelection)
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pageSize = val;
                this.currentPage = 1;
                this.listProduct();
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.currentPage = val;
                this.listProduct();
            },
            //表单提交方法
            async onSubmit() {
                console.log('提交');
                // query: {
                //     name : 'abc'
                // }
                const response = await axios.request({
                    method: 'get',
                    url: '/product',
                    params: {
                        name: this.formInline.name
                    }
                })
                console.log(response.data)
                this.tableData = response.data;

            },
            // 新增操作
            insert() {
                let _this = this;
                console.log(_this);
                //关掉弹框
                axios({
                    method: 'post',
                    url: '/product',
                    withCredentials:true,
                    params: this.insertForm
                }).then(function (response) {
                    if ("no" == response.data) {
                        alert("新增失败")
                    } else {
                        _this.listProduct();
                    }
                });
                    _this.dialogVisible = false;
                _this.insertForm = {
                    name: '',
                    price: '',
                    remark: ''
                };
                this.fetchdata().then();
            },
            // 获取数据
             async fetchdata(){
                    const response = await axios.request({
                        url: '/product',
                        method: 'get',
                        params: {
                            currentPage: this.currentPage,
                            pageSize: this.pageSize,
                            name: this.formInline.name
                        }
                    })
                    console.log(response)
                    this.tableData = response.data

            },
        },
        data() {
            return {
                //编辑的 form
                updateForm: {
                    id: '',
                    name: '',
                    price: '',
                    remark: ''
                },
                insertForm: {
                    name: '',
                    price: '',
                    remark: ''
                },
                rules: {},
                //新增
                dialogVisible: false,
                //编辑
                updateDialogVisible: false,
                formInline: {
                    name: ''
                },
                currentPage: 1,
                pageSize: 10,
                multipleSelection: [],
                tableData: []
            }
        },
        mounted:function (){
            this.fetchdata().then();
        }
    })
</script>
</body>
</html>